<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试登录页面 - FBro自动登录浏览器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .login-header p {
            color: #666;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .login-button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .success-message {
            display: none;
            background: #4caf50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            text-align: center;
        }

        .info-box {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            font-size: 12px;
            color: #666;
        }

        .info-box h3 {
            color: #333;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .info-box code {
            background: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            color: #e91e63;
        }

        .info-item {
            margin: 8px 0;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>🔐 测试登录页面</h1>
            <p>用于测试FBro自动登录浏览器</p>
        </div>

        <form id="login-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>

            <button type="submit" id="login-button" class="login-button">
                登录
            </button>
        </form>

        <div id="success-message" class="success-message">
            ✅ 登录成功！用户名: <span id="logged-username"></span>
        </div>

        <div class="info-box">
            <h3>📋 自动登录配置</h3>
            <div class="info-item">
                <strong>登录URL:</strong><br>
                <code>file:///[路径]/test_login_page.html</code>
            </div>
            <div class="info-item">
                <strong>用户名框选择器:</strong><br>
                <code>#username</code>
            </div>
            <div class="info-item">
                <strong>密码框选择器:</strong><br>
                <code>#password</code>
            </div>
            <div class="info-item">
                <strong>登录按钮选择器:</strong><br>
                <code>#login-button</code>
            </div>
            <div class="info-item" style="margin-top: 15px; padding-top: 10px; border-top: 1px solid #ddd;">
                <strong>测试账号:</strong> 任意用户名和密码均可
            </div>
        </div>
    </div>

    <script>
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            console.log('登录尝试:', {
                username: username,
                password: '******',
                timestamp: new Date().toISOString()
            });

            // 模拟登录延迟
            setTimeout(() => {
                // 显示成功消息
                document.getElementById('logged-username').textContent = username;
                document.getElementById('success-message').style.display = 'block';
                
                console.log('✅ 登录成功!');
                
                // 2秒后跳转到成功页面
                setTimeout(() => {
                    document.body.innerHTML = `
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center;">
                            <div style="background: white; padding: 60px 40px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); text-align: center; max-width: 500px;">
                                <div style="font-size: 72px; margin-bottom: 20px;">✅</div>
                                <h1 style="color: #4caf50; margin-bottom: 20px; font-size: 32px;">登录成功！</h1>
                                <p style="color: #666; font-size: 18px; margin-bottom: 30px;">
                                    欢迎回来，<strong style="color: #333;">${username}</strong>
                                </p>
                                <div style="background: #f5f5f5; padding: 20px; border-radius: 5px; margin-top: 30px;">
                                    <p style="color: #333; font-size: 14px; margin-bottom: 10px;">
                                        🎉 FBro自动登录测试成功！
                                    </p>
                                    <p style="color: #666; font-size: 12px;">
                                        当前页面URL不包含"login"，表示已离开登录页面。<br>
                                        可以使用"检查登录"功能验证登录状态。
                                    </p>
                                </div>
                            </div>
                        </div>
                    `;
                    console.log('🎉 页面已跳转到登录成功页面');
                }, 2000);
            }, 500);
        });

        // 监听input事件（自动填写时触发）
        document.getElementById('username').addEventListener('input', function(e) {
            console.log('用户名输入框值变更:', e.target.value);
        });

        document.getElementById('password').addEventListener('input', function(e) {
            console.log('密码输入框值变更: ******');
        });

        // 监听click事件
        document.getElementById('login-button').addEventListener('click', function() {
            console.log('登录按钮被点击');
        });

        console.log('测试登录页面已加载');
        console.log('页面元素:');
        console.log('- 用户名框:', document.querySelector('#username') ? '✅ 存在' : '❌ 不存在');
        console.log('- 密码框:', document.querySelector('#password') ? '✅ 存在' : '❌ 不存在');
        console.log('- 登录按钮:', document.querySelector('#login-button') ? '✅ 存在' : '❌ 不存在');
    </script>
</body>
</html>

